<%inherit file="../base.html" />
<%! from django.urls import reverse %>
<%def name="css()">
<link href="/static/client/css/public_video.css" rel="stylesheet" />
</%def>
<%def name="content()">
<%
    pre_page = '{}?searchfor={}&genres={}&page={}'.format(reverse('client_video'), searchfor,genres, page_num -1)
    next_page = '{}?searchfor={}&genres={}&page={}'.format(reverse('client_video'), searchfor,genres, page_num +1)
%>
<ul class="nav nav-tabs">
    <li role="presentation"><a href="${reverse('client_video')}?genres=Adventure">Adventure</a></li>
    <li role="presentation"><a href="${reverse('client_video')}?genres=Animation">Animation</a></li>
    <li role="presentation"><a href="${reverse('client_video')}?genres=Children">Children</a></li>
    <li role="presentation"><a href="${reverse('client_video')}?genres=Comedy">Comedy</a></li>
    <li role="presentation"><a href="${reverse('client_video')}?genres=Fantasy">Fantasy</a></li>
    <li role="presentation"><a href="${reverse('client_video')}?genres=Drama">Drama</a></li>
    <li role="presentation"><a href="${reverse('client_video')}?genres=Romance">Romance</a></li>
    <li role="presentation"><a href="${reverse('client_video')}?genres=Action">Action</a></li>
    <li role="presentation"><a href="${reverse('client_video')}?genres=Thriller">Thriller</a></li>
    <li role="presentation"><a href="${reverse('client_video')}?genres=Horror">Horror</a></li>
    <li role="presentation"><a href="${reverse('client_video')}?genres=Crime">Crime</a></li>
    <li role="presentation"><a href="${reverse('client_video')}?genres=Mystery">Mystery</a></li>
    <li role="presentation"><a href="${reverse('client_video')}?genres=Sci-Fi">Sci-Fi</a></li>
    <li role="presentation"><a href="${reverse('client_video')}?genres=War">War</a></li>
    <li role="presentation"><a href="${reverse('client_video')}?genres=Musical">Musical</a></li>
    <li role="presentation"><a href="${reverse('client_video')}?genres=Documentary">Documentary</a></li>
    <li role="presentation"><a href="${reverse('client_video')}?genres=Film-Noir">Film-Noir</a></li>
    <li role="presentation"><a href="${reverse('client_video')}?genres=Western">Western</a></li>
</ul>
<div class=" input-group big">
    <span class="col-lg-6" style="width: 30%;float: left">
        <span class="input-group">
            <form action="${reverse('client_video')}" method="get">
                <input type="text" class="form-control" name="searchfor" placeholder="Search for...">
                <span class="input-group-btn">
                    <input class="btn btn-default" type="submit">搜索</input>
                </span>
            </form>
        </span>
    </span>
    <span class="col-lg-6" style="width: 20%;float: right">
        <span class="input-group">
            <form action="" style="float: right" method="get" class="input-group form1">
                <input type="text" name="pt" class="form-control a" aria-describedby="basic-addon1">
                <input type="hidden" class="form-control" name="searchfor" value="${searchfor}" >
                <input type="hidden" class="form-control" name="genres" value="${genres}" >
                <span class="input-group-btn">
                    <input class="btn btn-default" type="submit">跳转</input>
                </span>
            </form>
            <span class="col-lg-6" style="float: right">
            <p>当前第${page_num}页</p>
            <p>共${total}页</p>
            </span>
        </span>
    </span>
</div>


<div class="container">
% for video in videos:
<div class="item">
        <h5 class="title">名称：${video.title}</h5>
        <h5 class="genres">题材：${video.genres}</h5>
        <span>
            <label>评分：</label>
            <select class="score" id="${video.movieId}">
                <option value ="0.5">0.5</option>
                <option value ="1">1</option>
                <option value="1.5">1.5</option>
                <option value="2">2</option>
                <option value ="2.5">2.5</option>
                <option value ="3">3</option>
                <option value="3.5">3.5</option>
                <option value="4">4</option>
                <option value="4.5">4.5</option>
                <option value="5">5</option>
            </select><br/>
            <button class="btn btn-default collect" id="${video.movieId}" style="margin-top: 5px">收藏</button><br/>
            % if score:
            ${score}
            % endif
        </span>
</div>
% endfor
</div>

<nav aria-label="..." class="nav1">
  <ul class="pager">
      % if page_num >1:
      <li><a href="${pre_page}">Previous</a></li>
      % endif
      % if page_num < total:
      <li><a href="${next_page}">Next</a></li>
      % endif
  </ul>
</nav>
</%def>

<%def name="js()">\
    <script>
         $(".score").change(function () {
             var score = $(this).val();
             var url = '${reverse("score")}';
             var movieid = $(this).attr('id');

             $.ajax({
                 url: url,
                 type: 'post',
                 data: {
                     movieid: movieid,
                     score: score
                 },
                 success: function (data) {
                     alert(data.msg)
                 }
             })
         })

        $(".collect").click(function () {
             var url = '${reverse("collect")}';
             var movieid = $(this).attr('id');

             $.ajax({
                 url: url,
                 type: 'post',
                 data: {
                     movieid: movieid
                 },
                 success: function (data) {
                     alert(data.msg)
                 }
             })
         })

        $(".chat").click(function () {
             var url = '${reverse("chat")}';

             $.ajax({
                 url: url,
                 type: 'get',
                 success: function (data) {

                 }
             })
         })
    </script>
</%def>


